import React from 'react';
import { Card, Form, Divider, Button, Row, Col, Alert, message } from 'antd';
import { BottomAction } from '@/components';
import pageTabUtil from '@/utils/pageTabUtil';

import { useAttendanceById } from './hooks';
import { Base, Punch, More } from './containers';
import styles from './style.less';
import { updateAttendance } from './service';

const Edit = ({ form, location: propsLocation }) => {
    const { query } = propsLocation;
    const [data, loading] = useAttendanceById(query.id);
    const [submitting, setSubmitting] = React.useState(false);

    const update = async payload => {
        setSubmitting(true);
        const { code } = await updateAttendance(payload);
        setSubmitting(false);
        if (code === 10000) {
            pageTabUtil.goBack();
        }
    };

    const handleCancel = () => {
        pageTabUtil.goBack();
    };

    const handleSubmit = () => {
        form.validateFieldsAndScroll(err => {
            if (!err) {
                const {
                    address,
                    location,
                    signWay,
                    locationRange,
                    signLocations,
                    outCardRule,
                    ...rest
                } = form.getFieldsValue();
                // const signConfig =
                //     !locationRange && !signLocations ? { signWay } : { signWay, locationRange, signLocations };
                const enabledPositionOfMachine = signWay && signWay.includes('1');
                const enabledPositionOfGps = signWay && signWay.includes('2');
                const enabledPositionOfWifi = signWay && signWay.includes('3');
                // 外勤打卡三个checkbox
                const outsideSignMustFlow = outCardRule && outCardRule.includes(1);
                const outsideSignMustRemark = outCardRule && outCardRule.includes(2);
                const outsideSignMustPhoto = outCardRule && outCardRule.includes(3);
                if (enabledPositionOfGps && signLocations.length === 0) {
                    message.error('请至少添加一个地址！');
                    return;
                }
                update({
                    id: query.id ? Number(query.id) : null,
                    signLocations: signLocations || [],
                    enabledPositionOfMachine,
                    enabledPositionOfGps,
                    enabledPositionOfWifi,
                    outsideSignMustFlow,
                    outsideSignMustRemark,
                    outsideSignMustPhoto,
                    groupType: 'FIXED',
                    ...rest
                });
            }
        });
    };

    return (
        <Card
            title={query?.id ? '修改考勤设置' : '新增考勤设置'}
            className={styles.setting}
            style={{ margin: 16 }}
            loading={loading}
        >
            <div className={styles.title}>基本信息</div>
            <Row style={{ marginBottom: 28 }}>
                <Col offset={1}>
                    <Alert showIcon message="只需设置参与考勤组的人员，未勾选人员不参与考勤" type="info" closable />
                </Col>
            </Row>

            <Base form={form} data={data} />
            <Divider />

            <div className={styles.title}>打卡设置</div>
            <Punch form={form} data={data} />
            <Divider />

            <div className={styles.title}>更多设置</div>
            <More form={form} data={data} />

            <BottomAction>
                <Button onClick={handleCancel}>取消</Button>
                <Button type="primary" onClick={handleSubmit} loading={submitting}>
                    提交
                </Button>
            </BottomAction>
        </Card>
    );
};

export default Form.create({ name: 'Edit' })(Edit);
